<template>
  <div class="main-part">
    <h3 class="title">每日待办事项</h3>
    <!--  添加一个新的待办事项 -->
    <el-row>
      <el-col :span="12">
        <el-form class="el-form-add">
          <el-input
            v-model="newTodoText"
            id="new-todo"
            placeholder="例如：运动"
          >
          </el-input>
          <el-button type="primary" v-on:click="addNewTodo"> 添加 </el-button>
        </el-form>
      </el-col>
    </el-row>

    <div id="todo-list">
      <el-row>
        <!--  展示待办事项 -->
        <el-col :span="12">
          <ul class="card">
            待办事项
            <div v-for="(todo, index) in todos" :key="index">
              <el-row>
                <div class="todo-list-content">
                  <el-col class="one-todo-list-content-title">
                    {{ index + 1 + ":" }} {{ todo.name }}
                  </el-col>
                  <el-col class="one-todo-list-content">
                    <el-button
                      type="primary"
                      v-on:click="todoCardFinishTodo(todo.id)"
                      >完成</el-button
                    >
                    <el-button type="danger" v-on:click="deleteTodo(todo.id)"
                      >删除</el-button
                    >
                  </el-col>
                </div>
              </el-row>
            </div>
          </ul>
        </el-col>
        <!--  展示已完成事项 -->
        <el-col :span="12">
          <ul class="card-two">
            <div>
              已完成事项
              <template v-for="(todo, index) in finishTodos" :key="index">
                <el-row>
                  <div class="todo-list-content">
                    <el-col class="one-todo-list-content-title">
                      {{ index + 1 + ":" }} {{ todo.name }}
                    </el-col>
                    <el-col class="one-todo-list-content">
                      <el-button
                        type="danger"
                        v-on:click="deleteFinishList(todo.id)"
                        >删除</el-button
                      >
                    </el-col>
                  </div>
                </el-row>
              </template>
            </div>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";

export default {
  data() {
    return {
      todos: [],
      newTodoText: "",
      nextTodoId: 4,
      finishTodos: [],
      finishTodoIndex: 0,
    };
  },
  mounted() {
    axios({
      method: "get",
      url: "/spring-boot/todos/manager/todo/1",
    }).then((data) => {
      this.todos = data.data.data;
    });

    axios({
      method: "get",
      url: "/spring-boot/todos/manager/todo/2",
    }).then((data) => {
      this.finishTodos = data.data.data;
    });
  },
  methods: {
    /**
     * 添加一个新的待办事项
     */
    addNewTodo() {
      if (this.newTodoText == "") {
        ElMessage.error("不可以添加空的待办事项");
      } else {
        axios({
          method: "post",
          url: "/spring-boot/todos/manager/add",
          data: {
            name: this.newTodoText,
          },
        }).then((data) => {
          axios({
            method: "get",
            url: "/spring-boot/todos/manager/todo/1",
          }).then((data) => {
            this.todos = data.data.data;
            this.newTodoText = "";
          });
        });
      }
    },

    /**
     * 删除一个待办事项
     */
    deleteTodo(id) {
      axios({
        method: "get",
        url: `/spring-boot/todos/manager/delete/${id}`,
      }).then((data) => {
        axios({
          method: "get",
          url: "/spring-boot/todos/manager/todo/1",
        }).then((data) => {
          this.todos = data.data.data;
        });
      });
    },

    /**
     * 完成一个待办事项
     */
    todoCardFinishTodo(id) {
      axios({
        method: "post",
        url: `/spring-boot/todos/manager/update`,
        data: {
          id: id,
          type: 2,
        },
      }).then((data) => {
        axios({
          method: "get",
          url: "/spring-boot/todos/manager/todo/1",
        }).then((data) => {
          this.todos = data.data.data;
        });

        axios({
          method: "get",
          url: "/spring-boot/todos/manager/todo/2",
        }).then((data) => {
          this.finishTodos = data.data.data;
        });
      });
    },

    /**
     * 删除已完成事项
     */
    deleteFinishList(id) {
      axios({
        method: "get",
        url: `/spring-boot/todos/manager/delete/${id}`,
      }).then((data) => {
        axios({
          method: "get",
          url: "/spring-boot/todos/manager/todo/2",
        }).then((data) => {
          this.finishTodos = data.data.data;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main-part {
  background-color: rgba(229, 244, 239, 0.5);
  height: 100vh;
}
.el-form {
  float: left;
}

.el-form-add {
  width: 50%;
  float: right;
}

.el-input {
  margin-left: 15px;
  margin-right: 15px;
  width: 150px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 50%;
  border-radius: 5px;
  padding: 5px;
  margin-right: 10px;
  float: right;
}

.card-two {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 50%;
  border-radius: 5px;
  padding: 5px;
  margin-left: 10px;
  float: left;
}

.todo-list-content {
  margin: 5px;
}

.one-todo-list-content {
  margin: 5px;
}

.one-todo-list-content-title {
  margin: 5px;
  width: 110px;
  text-align: left;
}

.title {
  text-align: left;
  color: rgba(27, 2, 2, 0.5);
}
</style>
